<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
</head>
<body>

	
	<div class="container">
	    <h1>The Activity Page</h1>
		<div>
			<button type="button" class="btn btn-primary"
			onclick="javascript:location.href='doActivityEditUI'">普通方式添加</button>

			<button type="button" class="btn btn-primary"
				data-toggle="modal" onclick="doShowAddDialog()">模态框方式添加</button>
		</div>
		<div>
			<table class="table">
				<thead>
					<tr>
						<th>id</th>
						<th>title</th>
						<th>category</th>
						<th>startTime</th>
						<th>endTime</th>
						<th>state</th>
						<th>createdTime</th>
						<th colspan="2">Operation</th>
					</tr>
				</thead>
				<tbody>
					<tr th:each="a:${list}">
						<td th:text="${a.id}"></td>
						<td th:text="${a.title}"></td>
						<td th:text="${a.category}"></td>
						<td th:text="${#dates.format(a.startTime, 'yyyy/MM/dd HH:mm')}"></td>
						<td th:text="${#dates.format(a.endTime, 'yyyy/MM/dd HH:mm')}"></td>
						<td th:text="${a.state}"></td>
						<td th:text="${#dates.format(a.createdTime, 'yyyy/MM/dd HH:mm')}"></td>
						<td>
						<button class="btn btn-danger btn-sm" th:onclick="doDeleteById([[${a.id}]])">删除</button>
						<button class="btn btn-warning btn-sm" th:onclick="doLoadById([[${a.id}]])">更新</button>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	<!-- Modal -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">Modal title</h4>
				</div>
				<div class="modal-body">
					<form id="atyFormId" class="form-horizontal" action="doSaveActivity" method="post">
						<input type="hidden" name="id" id="atyId">
						<div class="form-group">
							<label for="titleId" class="col-sm-2 control-label">title</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="title"
									id="titleId" placeholder="title">
							</div>
						</div>
						<div class="form-group">
							<label for="categoryId" class="col-sm-2 control-label">category</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="category"
									id="categoryId" placeholder="category">
							</div>
						</div>
						<div class="form-group">
							<label for="startTimeId" class="col-sm-2 control-label">startTime</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="startTime"
									id="startTimeId" placeholder="yyyy/MM/dd">
							</div>
						</div>
						<div class="form-group">
							<label for="endTimeId" class="col-sm-2 control-label">endTime</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="endTime"
									id="endTimeId" placeholder="yyyy/MM/dd">
							</div>
						</div>
						<div class="form-group">
							<label for="remarkId" class="col-sm-2 control-label">remark</label>
							<div class="col-sm-10">
								<textarea class="form-control" id="remarkId" name="remark"
									placeholder="remark"></textarea>
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="button" class="btn btn-primary" onclick="doSaveActivity()">Save changes</button>
				</div>
			</div>
		</div>
	</div>
	<!-- 当在页面中需要使用bootstrap插件时，需要添加如下两个js，但也要注意顺序 -->
	<script type="text/javascript" src="/jquery/jquery.min.js"></script>
	<script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>
	<!-- 假如要在js中获取thymeaf表达式中的数据script标签内部需要th:inline="javascript" -->
	<script th:inline="javascript">
	     $(function(){//页面加载完成以后执行
	    	 var aty=[[${aty}]];//在js中获取thyemeaf表达式中的内容
	         //console.log("aty",aty); 在浏览器输出相关内容
	         if(aty){
	        	 doInitEditFormData(aty)
	         }
	     });
	    
	     function doInitEditFormData(aty){
	    	 $("#atyId").val(aty.id);
	    	 $("#titleId").val(aty.title);
        	 $("#categoryId").val(aty.category);
        	 $("#startTimeId").val(aty.startTime);
        	 $("#endTimeId").val(aty.endTime);
        	 $("#remarkId").text(aty.remark);
        	 //显示模态框
        	 $('#myModal').modal('show'); 
        	 
	     }
	     //呈现添加模态框
	     function doShowAddDialog(){
	    	 $("#atyId").val('');
	    	 $("#titleId").val('');
        	 $("#categoryId").val('');
        	 $("#startTimeId").val('');
        	 $("#endTimeId").val('');
        	 $("#remarkId").text('');
        	 //显示模态框
	    	 $('#myModal').modal('show'); 
	     }
	     function doLoadById(id){
	    	 location.href="doFindById?id="+id;
	     }
	     function doDeleteById(id){
	    	if(!confirm("确定删除吗"))return;
		    location.href="doDeleteById?id="+id;
	     }
	     function doSaveActivity(){
	    	// alert("save activity");
	    	//对表单内容进行校验
	    	//执行表单提交操作(基于js方式提交表单)
	    	$("#atyFormId").submit();
	    	//关闭模态框
	    	$('#myModal').modal('hide');
	     }
	</script>
</body>
</html>




